<template>
	<view class="main">
		<view class="warn" @click="isWarn = false" v-if="isWarn">
			{{SensitiveTips}}
			<view class="warn-btn">
				<view class="warn-left">
					继续搜索
				</view>
				<view class="warn-right">
					拨打救助电话
				</view>
			</view>
		</view>
		<view class="sea-top">
			<view class="top-left">
				<view class="left-image">
					<image src="../../static/icons/ss.png" mode="widthFix"></image>
				</view>
				<view class="left-ipt">
					<input class="ipt-item" :value="searchStr" v-model="searchStr" @keydown.enter="goSearch(searchStr)" type="text" placeholder="在这里写下你想寻找的~" />
				</view>
				<u-icon class="ipt-clear" v-show="searchStr" @click="clearSearchStr" name="close-circle-fill" color="#afb3ba"></u-icon>
			</view>
			<view class="top-right" @click="goBack">
				取消
			</view>
		</view>
		<u-gap height="100" bgColor="#fff"></u-gap>
		<view class="top-nav">
			<scroll-view class="select-tabs" scroll-x="true">
				<view class="tabs-item" v-for="(t, i) in tabs" :key="i" :class="{selected: currentIndex === i}" @click="selectType(i)">
					{{t.title}}
				</view>
			</scroll-view>
		</view>
		<u-gap height="100" bgColor="#fff"></u-gap>
		<view class="data-null" v-if="(currentIndex == 6) && SearchAuthorList.length == 0">
			一个都没有~
		</view>
		<view class="aut-tag" v-if="(currentIndex == 0 || currentIndex == 6) && SearchAuthorList.length != 0">
			<view class="line"></view>
			作者/音乐人
			<view class="line"></view>
		</view>
		<view class="aut-list" v-if="currentIndex == 0 || currentIndex == 6">
			<view class="aut-item" @click="naviToAuthor(a.content_id)" v-for="(a, i) in SearchAuthorList" :key="a.content_id">
				<view class="aut-avatar">
					<image :src="a.cover" mode="widthFix"></image>
				</view>
				<view class="aut-info">
					<view class="aut-name">
						{{a.title}}
					</view>
					<view class="aut-subtitle">
						{{a.subtitle}}
					</view>
				</view>
			</view>
		</view>
		<view class="data-null" v-if="(currentIndex == 1) && SearchDailyList.length == 0">
			一个都没有~
		</view>
		<view class="mus-tag" v-if="(currentIndex == 0 || currentIndex == 1) && SearchDailyList.length != 0">
			<view class="line"></view>
			日签
			<view class="line"></view>
		</view>
		<view class="mus-list" v-if="currentIndex == 0 || currentIndex == 1">
			<view class="mus-item" @click="naviToDaily(m.date.slice(0, 10))" v-for="(m, i) in SearchDailyList" :key="m.content_id">
				<view class="mus-img">
					<image :src="m.cover" mode="widthFix"></image>
				</view>
				<view class="mus-info">
					<view class="mus-title">
						{{m.title}}
					</view>
					<view class="mus-subtitle">
						{{m.subtitle}}
					</view>
				</view>
			</view>
		</view>
		<view class="data-null" v-if="(currentIndex == 4) && SearchMusicList.length == 0">
			一个都没有~
		</view>
		<view class="mus-tag" v-if="(currentIndex == 0 || currentIndex == 4) && SearchMusicList.length != 0">
			<view class="line"></view>
			音乐
			<view class="line"></view>
		</view>
		<view class="mus-list" v-if="currentIndex == 0 || currentIndex == 4">
			<view class="mus-item" @click="naviToMusic(m.content_id)" v-for="(m, i) in SearchMusicList" :key="m.content_id">
				<view class="mus-img">
					<image :src="m.cover" mode="widthFix"></image>
				</view>
				<view class="mus-info">
					<view class="mus-title">
						{{m.title}}
					</view>
					<view class="mus-subtitle">
						{{m.subtitle}}
					</view>
				</view>
			</view>
		</view>
		<view class="data-null" v-if="(currentIndex == 3) && SearchRadioList.length == 0">
			一个都没有~
		</view>
		<view class="rad-tag" v-if="(currentIndex == 0 || currentIndex == 3) && SearchRadioList.length != 0">
			<view class="line"></view>
			ONE收音机
			<view class="line"></view>
		</view>
		<view class="mus-list" v-if="currentIndex == 0 || currentIndex == 3">
			<view class="mus-item" @click="naviToRadio(m.content_id)" v-for="(m, i) in SearchRadioList" :key="m.content_id">
				<view class="mus-img">
					<image :src="m.cover" mode="widthFix"></image>
				</view>
				<view class="mus-info">
					<view class="mus-title">
						{{m.title}}
					</view>
					<view class="mus-subtitle">
						{{m.subtitle}}
					</view>
				</view>
			</view>
		</view>
		<view class="data-null" v-if="(currentIndex == 5) && SearchBookShadowList.length == 0">
			一个都没有~
		</view>
		<view class="mus-tag" v-if="(currentIndex == 0 || currentIndex == 5) && SearchBookShadowList.length != 0">
			<view class="line"></view>
			书影
			<view class="line"></view>
		</view>
		<view class="mus-list" v-if="currentIndex == 0 || currentIndex == 5">
			<view class="mus-item" @click="naviToBookShadow(m.content_id)" v-for="(m, i) in SearchBookShadowList" :key="m.content_id">
				<view class="mus-img">
					<image :src="m.cover" mode="widthFix"></image>
				</view>
				<view class="mus-info">
					<view class="mus-title">
						{{m.title}}
					</view>
					<view class="mus-subtitle">
						{{m.subtitle}}
					</view>
				</view>
			</view>
		</view>
		<view class="data-null" v-if="(currentIndex == 2) && SearchReadList.length == 0">
			一个都没有~
		</view>
		<view class="mus-tag" v-if="(currentIndex == 0 || currentIndex == 2) && SearchReadList.length != 0">
			<view class="line"></view>
			阅读
			<view class="line"></view>
		</view>
		<view class="mus-list" v-if="currentIndex == 0 || currentIndex == 2">
			<view class="mus-item" @click="naviToRead(m.content_id)" v-for="(m, i) in SearchReadList" :key="m.content_id">
				<view class="mus-img">
					<image :src="m.cover" mode="widthFix"></image>
				</view>
				<view class="mus-info">
					<view class="mus-title">
						{{m.title}}
					</view>
					<view class="mus-subtitle">
						{{m.subtitle}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	export default {
		data() {
			return {
				SensitiveWords: [],
				SensitiveTips: [],
				isWarn: false,
				searchStr: '',
				SearchAuthorList: [],
				SearchDailyList: [],
				SearchMusicList: [],
				SearchRadioList: [],
				SearchBookShadowList: [],
				SearchReadList: [],
				currentIndex: 0,
				tabs: [{
						title: '全部',
						// component: ReadView.name
					},
					{
						title: '日签',
						// component: ReadView.name
					},
					{
						title: '阅读',
						// component: SpecialTopic.name
					},
					{
						title: 'ONE收音机',
						// component: Questions.name
					},
					{
						title: '音乐',
						// component: LongWriting.name
					},
					{
						title: '书影',
						// component: SmallNotes.name
					},
					{
						title: '作者/音乐人',
						// component: HotList.name
					}
				]
			}
		},
		onLoad({
			kw
		}) {
			console.log(kw);
			this.searchStr = kw
			this.getSearchAuthor(kw)
			this.getSearchDaily(kw)
			this.getSearchMusic(kw)
			this.getSearchRadio(kw)
			this.getSearchBookShadow(kw)
			this.getSearchRead(kw)
			
			// 敏感词检测
			this.getSensitiveWords(kw)
		},
		methods: {
			getSensitiveWords(kw) {
				let url = 'config'
				http(url).then(res => {
					this.SensitiveTips = res.data.search_keywords.tips
					// console.log(this.SensitiveTips);
					this.SensitiveWords = res.data.search_keywords.keywords
					// console.log(this.SensitiveWords);
					for (let i = 0; i <= this.SensitiveWords.length; i++) {
						if (this.SensitiveWords[i] == kw) {
							// console.log('!!!');
							this.isWarn = true
							// console.log(this.isWarn);
						}
					}
				})
			},
			clearSearchStr() {
				// console.log('clear');
				this.searchStr = ''
			},
			goSearch(kw) {
				console.log(kw);
				uni.navigateTo({
					url: '/pages/SearchDetails/SearchDetails?kw=' + kw
				})
			},
			goBack() {
				// 返回上一级并刷新当前页面
				this.$router.go(-1)
				
				// uni.navigateTo({
				// 	url: '/pages/search/search'
				// })
			},
			getSearchAuthor(kw) {
				let url = 'search/author/' + kw + '/0'
				http(url).then(res => {
					this.SearchAuthorList = res.data.list
					// console.log(this.SearchAuthorList);
				})
			},
			getSearchDaily(kw) {
				let url = 'search/hp/' + kw + '/0'
				http(url).then(res => {
					this.SearchDailyList = res.data.list
					// console.log(this.SearchDailyList);
				})
			},
			getSearchMusic(kw) {
				let url = 'search/music/' + kw + '/0'
				http(url).then(res => {
					this.SearchMusicList = res.data.list
					// console.log(this.SearchMusicList);
				})
			},
			getSearchRadio(kw) {
				let url = 'search/radio/' + kw + '/0'
				http(url).then(res => {
					this.SearchRadioList = res.data.list
					// console.log(this.SearchRadioList);
				})
			},
			getSearchBookShadow(kw) {
				let url = 'search/movie/' + kw + '/0'
				http(url).then(res => {
					this.SearchBookShadowList = res.data.list
					// console.log(this.SearchBookShadowList);
				})
			},
			getSearchRead(kw) {
				let url = 'search/reading/' + kw + '/0'
				http(url).then(res => {
					this.SearchReadList = res.data.list
					// console.log(this.SearchReadList);
				})
			},
			selectType(index) {
				if (index !== this.currentIndex) {
					// console.log('selected');
					this.currentIndex = index
				}
			},
			naviToAuthor(id) {
				uni.navigateTo({
					url: '/pages/AuthorDetails/AuthorDetails?id=' + id
				})
			},
			naviToDaily(date) {
				uni.navigateTo({
					url: '/pages/DailyContent/DailyContent?date=' + date
				})
			},
			naviToMusic(id) {
				uni.navigateTo({
					url: '/pages/MusicContent/MusicContent?id=' + id
				})
			},
			naviToRadio(id) {
				uni.navigateTo({
					url: '/pages/RadioContent/RadioContent?id=' + id
				})
			},
			naviToBookShadow(id) {
				uni.navigateTo({
					url: '/pages/BookShadowContent/BookShadowContent?id=' + id
				})
			},
			naviToRead(id) {
				uni.navigateTo({
					url: '/pages/ReadContent/ReadContent?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.main {
		position: relative;
		height: 1200rpx;
		
		.warn {
			padding: 20px;
			position: absolute;
			top: 45%;
			left: 10%;
			width: 600rpx;
			// height: 100rpx;
			background-color: #cfcfcf;
			z-index: 1000;
			font-size: 14px;
			color: #e19600;
			border-radius: 15px;
			
			.warn-btn {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				font-size: 10px;
			}
		}
	}
	
	.sea-top {
		position: fixed;
		padding: 10px;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		z-index: 1000;
		// border-bottom: 1px solid #e8e8e8;
		
		.top-left {
			// margin: 10px;
			// padding: 10px;
			flex: 8.5;
			display: flex;
			align-items: center;
			width: 85%;
			height: 100%;
			background-color: #eaeaea;
			border-radius: 5px;
			
			.left-image {
				padding: 8px 5px 5px 5px;
				// padding: 10px;
				// width: 85%;
				// height: 100%;
				
				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
			
			.left-ipt {
				width: 100%;
				// height: 100%;
				
				.ipt-item {
					width: 100%;
					// height: 64rpx;
					height: 100%;
					font-size: 12px;
				}
			}
		}
		
		.top-right {
			flex: 1.5;
			float: right;
			width: 100%;
			text-align: center;
			font-size: 12px;
		}
	}
	
	.top-nav {
		position: fixed;
		display: flex;
		width: 750rpx;
		z-index: 1000;
		background-color: #fff;
		
		.select-tabs {
			flex: 9;
			display: flex;
			white-space: nowrap;
			width: 80%;
			
			.tabs-item {
				display: inline-block;
				white-space: nowrap;
				padding: 10px 0;
				margin: 0 10px;
				font-size: 14px;
				text-align: center;
				color: #9a9a9a;
				
				&.selected {
					color: #000;
					font-weight: 700;
					border-bottom: 1px solid #000000;
				}
			}
		}
		
		.search-btn {
			padding-top: 25rpx;
			flex: 1;
			text-align: center;
			
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	
	.aut-list {
		width: 750rpx;
	}
	
	.aut-tag {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-size: 12px;
		
		.line {
			margin: 0 15px;
			width: 250rpx;
			height: 0;
			border: 1px solid #eaeaea;
		}
	}
	
	.aut-item {
		padding: 10px 0;
		margin: 0 15px;
		display: flex;
		// width: 100%;
		border-bottom: 1px solid #d9d9d9;
		
		.aut-avatar {
			margin-right: 10px;
			flex: 1;
			overflow: hidden;
			
			image {
				width: 100%;
				border-radius: 999px;
			}
		}
		
		.aut-info {
			flex: 9;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.aut-name {
				width: 590rpx;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.aut-subtitle {
				width: 590rpx;
				font-size: 10px;
				color: #c1c1c1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	
	.mus-tag {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-size: 12px;
		
		.line {
			margin: 0 15px;
			width: 291rpx;
			height: 0;
			border: 1px solid #eaeaea;
		}
	}
	
	.mus-list {
		width: 750rpx;
	}
	
	.mus-item {
		padding: 10px 0;
		margin: 0 15px;
		display: flex;
		border-bottom: 1px solid #d9d9d9;
		
		.mus-img {
			margin-right: 10px;
			flex: 1;
			
			image {
				width: 100%;
			}
		}
		
		.mus-info {
			flex: 9;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.mus-title {
				width: 590rpx;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.mus-subtitle {
				width: 590rpx;
				font-size: 10px;
				color: #c1c1c1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	
	.rad-tag {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-size: 12px;
		
		.line {
			margin: 0 15px;
			width: 252rpx;
			height: 0;
			border: 1px solid #eaeaea;
		}
	}
	
	.data-null {
		padding: 10px;
		margin-top: 30px;
		text-align: center;
		color: #737373;
	}
</style>
